<template>
<div :class="['page', musicIndex !== -1 && 'play_bottom']">
  <div class="top_box flex_a_c">
    <div class="guide flex_a_c" @click="isShow = true">
      使用指南
      <img src="../../assets/img/music/icon_play_count.png" alt="">
    </div>
  </div>
  <div class="pl-16 pr-16">
    <div class="pr textInput_box">
      <textarea :class="['textInput flex_center', form.song_lyrics && 'active']" v-model="form.song_lyrics" placeholder="输入一段歌词" />
      <span>{{ form.song_lyrics.length }}<em> / 5000</em></span>
      <p @click="onSystemGenerateLyrics">没有灵感？我们帮你生成一段歌词吧</p>
    </div>
     <!-- mt-24 -->
    <div class="cont mt-14 flex_b_c">
      <div class="">
        <p class="title_txt">曲风</p>
        <p class="tips">自由提出你的音乐风格</p>
      </div>
      <!-- <input class="fz-14" type="text" placeholder="例如 男歌手 摇滚风格" /> -->
      <p :class="['upload_txt', form.song_genre && 'active']">{{ form.song_genre ? genreList.find(({ id }) => id === form.song_genre).genre_zh : '例如 男歌手 摇滚风格' }}</p>

    </div>
    <div class="style_cont mt-8">
      <div class="style_list">
        <div class="style_wrapper">
          <div class="style_title">快速选择：</div>
          <p v-for="item in genreList" :key="item.id" :class="['style_item', form.song_genre === item.id && 'active']" @click="form.song_genre = item.id">{{ item.genre_zh }}</p>
        </div>
      </div>
    </div>
    <div class="cont flex_a_c">
      <div class="title_txt">音乐标题</div>
      <input v-model="form.song_name" :class="['flex1', form.song_name && 'active']" maxlength="8" type="text" placeholder="给你的音乐起个标题">
    </div>
    <div class="flex_r">
      <div :class="['cont flex_a_c flex_b_c flex1 mr-7 ', !form.cover_image_url ? 'pr-27 next' : 'pr-6  pt-0 pb-0']">
        <div class="title_txt">音乐封面</div>
        <!-- <input class="w_60 input_file" type="file" placeholder="请选择"> -->
        <uploadCropper v-model:url="form.cover_image_url" />
      </div>
      <div class="cont flex_a_c flex_b_c flex1 pr-27 next">
        <div class="title_txt">送给谁</div>
        <p @click="isShowGive = true" :class="['upload_txt w_60 tr', form.dedicated_to && 'active']">{{  form.dedicated_to_name || '请选择'}}</p>
      </div>
    </div>
    <div class="btns flex_center mb-36" @click="onGenerate"><img src="../../assets/img/music/music_icon.png" alt="" class="icon">生成音乐</div>
    <van-sticky :offset-top="0">
      <div class="style_cont tab_cont mb-10 pb-10 pt-4">
        <div class="style_list">
          <div class="style_wrapper">
            <p v-for="item in genreList" :key="item.id" :class="['style_item', active === item.id && 'active']" @click="active = item.id">{{ item.genre_zh }}</p>
          </div>
        </div>
      </div>
    </van-sticky>
    <van-empty
        v-if="!list.length && total === 0"
        class="mt-40"
        image="https://fastly.jsdelivr.net/npm/@vant/assets/custom-empty-image.png"
        image-size="80"
        description="暂无歌曲"
      />
    <van-pull-refresh v-else v-model="refreshing" @refresh="onRefresh">
      <van-list
        v-model:loading="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
        class="pt-24"
      >
        <div v-if="total" class="music_list" v-for="(item, idx) in list" :key="item">
          <div class="info flex_r">
            <div class="cover" >
              <img @click="onPause" v-if="musicIndex === idx && isPlay" class="audio_btn" src="../../assets/img/music/pause_icon.png" alt="">
              <img @click="onPlay(idx)" v-else class="audio_btn" src="../../assets/img/music/play_icon.png" alt="">
              <img class="cover_img" :src="item.cover_image_url" alt="">
              <!-- https://zsjl.oss-cn-beijing.aliyuncs.com/workFile/image/png/lcjlfvcapj80jlxvrqi0qfwt.png?x-oss-process=image/resize,m_fixed,h_216,w_384 -->
            </div>
            <div class="pt-17">
              <div class="music_name">{{ item.song_name }}</div>
              <p>{{ item.song_lyrics.slice(0, 10) }}</p>
            </div>
          </div>
          <div class="opt flex_a_c flex_between">
            <div class="flex_a_c">
              <img class="opt_icon" src="../../assets/img/music/play_count.png" alt="">
              <p class="w_57 pl-5">{{ item.play_count }}</p>
              <img class="opt_icon mr-5" @click="onGiveLike(item)" src="../../assets/img/music/give_like_icon.png" alt="">
              {{ item.like_count }}
            </div>
            <div class="flex_a_c">
              <img class="opt_icon mr-4" src="../../assets/img/music/share_icon.png" alt="">
              以歌之名送给好友
            </div>
          </div>
        </div>
        <!-- <div class="lh-30" v-for="item in list" :key="item" :title="item">{{ item }}</div> -->
      </van-list>
    </van-pull-refresh>
    
  </div>
</div>
<tabBar />
<guide v-model:show="isShow" />
<giveMask v-model:show="isShowGive" v-model:dedicated_to="form.dedicated_to" v-model:dedicated_to_name="form.dedicated_to_name" />
</template>
<script setup>
import { ref, nextTick, onMounted, reactive } from 'vue'
import { showToast } from 'vant';
import tabBar from '@/components/tabBar'
import guide from '@/components/guide'
import giveMask from '@/components/giveMask'
import { useRouter } from 'vue-router'
import uploadCropper from '@/components/uploadCropper.vue'
import { useMusicStore } from '@/store/index';
import { storeToRefs } from "pinia";
import { getGenreList, getMusicList, postCreateSong, getSystemLyrics, postGiveLike } from '@/api'
import { deepClone } from '@/utils/index'
const store = useMusicStore();
const { musicIndex, musicList, isPlay } = storeToRefs(store)
let genreList = ref([]) // 曲风列表
let musicControl = ref('')
let router = useRouter()
let isShow = ref(false)
let isShowGive = ref(false)
let url = ref('')
let active = ref('')
let form = reactive({
  dedicated_to_name: '', 
  cover_image_url: '', // 封面
  dedicated_to: '', //送给谁
  song_genre: '', // 曲风
  song_lyrics: '', // 歌词
  song_name: '', // 歌曲名
})

let onPlay = idx => {
  if (musicIndex.value === idx) {
    store.setChangePlayStatus()
    return false
  }
  store.setMusicIndex(idx)
}
let onPause = () => {
  store.setChangePlayStatus()
}

let total = ref('')
// 上拉加载
const list = ref([]);
const loading = ref(false);
const finished = ref(false);
const refreshing = ref(false);
console.log(store, 'storestorestorestore')


const onLoad = () => {
  fnGetMusicList()
};
const onRefresh = () => {
  // 清空列表数据
  finished.value = false;
  // 重新加载数据
  // 将 loading 设置为 true，表示处于加载状态
  loading.value = true;
  onLoad(); 
};
const onGenerate = async() => {
  if (!form.song_lyrics) {
    showToast('请输入歌词')
    return false
  }
    if (form.song_lyrics.length < 500) {
    showToast('歌词至少五百字')
    return false
  }
  if (!form.cover_image_url) {
    showToast('请上传歌曲封面')
    return false
  }
  if (!form.song_name) {
    showToast('请输入歌曲名')
    return false
  }
  if (!form.song_genre) {
    showToast('请选择曲风')
    return false
  }
  
  if (!form.dedicated_to) {
    showToast('请选择送给谁')
    return false
  }
  let result = deepClone(form)
  delete result.dedicated_to_name
  result.song_genre = String(result.song_genre)
  const { code, data } = await postCreateSong(result)
  router.push('/music/pay')
}
// 获取歌曲列表
let listForm = reactive({ page_number: 1, page_size: 12 })
async function fnGetMusicList() {
  const { code, data } = await getMusicList({ dedicate_type: active.value, ...listForm })
  if (code === 200) {
    total.value = data.total
    if (refreshing.value) {
      list.value = [];
      refreshing.value = false;
    }
  //   data.song_list = [
  //     {
  //   "cover_image_url": "https://zsjl.oss-cn-beijing.aliyuncs.com/workFile/image/png/lcjlfvcapj80jlxvrqi0qfwt.png?x-oss-process=image/resize,m_fixed,h_216,w_384",
  //   "dedicated_to": 0,
  //   "genre_id": 0,
  //   "id": 0,
  //   "is_like_by_me": true,
  //   "like_count": 0,
  //   "play_count": 0,
  //   "song_author": 0,
  //   "song_genre": "流行",
  //   "song_lyrics": "这是歌词啊哈哈哈手动阀手动阀颗粒剂手打饭卡里手机打卡拉法基阿萨漏打卡飞机",
  //   "song_name": "这是歌曲名",
  //   "song_status": 0,
  //   "song_url": 'https://farhugs-web-assets.farhugs.net/public/media/background.1.85d13d0d591268b08effe3d462c9fa45.mp3'
  // }
  //   ]
    list.value = list.value.concat(data.song_list);
    list.value.forEach(item => {
      item.cover_image_url = 'https://zsjl.oss-cn-beijing.aliyuncs.com/workFile/image/png/lcjlfvcapj80jlxvrqi0qfwt.png?x-oss-process=image/resize,m_fixed,h_216,w_384'
    })
    store.setMusicList(list.value)
    loading.value = false;
    if (list.value.length >= total.value) {
      finished.value = true;
    } else {
       ++listForm.page_number
    }
  }
}
// 获取曲风列表
let fnGetGenreList = async () => {
  const { code, data } = await getGenreList()
  if (code === 200) {
    genreList.value = data
    active.value = data[0].id
  }
}
// 系统生成歌词
let onSystemGenerateLyrics = async () => {
  const { code, data } = await getSystemLyrics()
  if (code === 200) {
    form.song_lyrics = data.replace(/，/g, '\n')
    console.log(data,form.song_lyrics, 'data.data')
  }
}
// 点赞
let onGiveLike = async item => {
  if (item.is_like_by_me) {
    showToast('你已经点赞过了')
    return false
  }
  const { code, data } = await postGiveLike({ song_id: item.id })
  if (code === 200) {
    showToast('点赞成功')
    ++item.like_count
  }
}
onMounted(() => {
  fnGetGenreList()
})
</script>
<style scoped lang="scss" src="./card.scss"></style>
<style lang="scss" scoped>

.top_box {
  height: 72px;
  padding-right: 30px;
  background: #161616 url('../../assets/img/music/title_bg.png') no-repeat top 16px left 16px / 127px 36px;
  flex-direction: row-reverse;
  .guide {
		font-size: 14px;
		color: rgba(255, 255, 255, 0.4);
	  img {
			display: block;
			width: 8px;
			height: 9px;
      margin-left: 6px;
		}
  }
}
.textInput_box {
  word-break: break-all;
  white-space: pre-wrap;
  &:after {
    content: '';
    position: absolute;
    left: 5px;
    bottom: 30px;
    right: 5px;
    height: 20px;
    background: url(../../assets/img/music/lyric_mask.png) no-repeat left bottom / cover;
  }
  span {
    position: absolute;
    bottom: 40px;
    right: 20px;
    color: rgba(255, 255, 255, 0.9);
    font-size: 14px;
    z-index: 9;
    em {
      color: rgba(255, 255, 255, 0.5);
      font-style: normal;
    }
  }
  p {
    margin-top: 10px;
    height: 20px;
    line-height: 20px;
    text-decoration: underline;
    font-size: 12px;
    text-align: right;
    color: rgba(255, 255, 255, 0.5);
  }
}
.textInput {
  text-align: center;
  width: 100%;
  height: 160px;
  background: #0C0C0C;
  border-radius: 4px 4px 4px 4px;
  display: block;
  font-size: 14px;
  color: #ADADAD;
  line-height: 25px;
  padding: 10px;
  border: none;
  &.active {
    color: #fff;
  }
}

.style_cont {
  width: 100%;
  height: 24px;
  overflow: hidden;
  position: relative;
  &:before, &:after {
    content: '';
    position: absolute;
    top: 0;
    width: 54px;
    height: 28px;
    z-index: 99999;
  }
  &::before {
    background: linear-gradient(to right, #161616, transparent);
    left: -16px;
  }
  &::after {
    background: linear-gradient(to left, #161616, transparent);
    right: -16px;
  }
  .style_list {
    padding-bottom: 30px;
    overflow-x: scroll;
    overflow-y: hidden;
    font-size: 12px;
    color: rgba(255,255,255,0.4);
    line-height: 22px;
    position: relative;
   
    .style_title {
      width: 60px;
      display: inline-block;
      margin-right: 4px;
    }
    .style_wrapper {
      white-space: nowrap;
      display: inline-flex;
      .style_item {
        height: 24px;
        min-width: 50px;
        border-radius: 4px 4px 4px 4px;
        border: 1px solid rgba(255,255,255,0.1);
        margin-right: 4px;
        text-align: center;
        padding: 0 8px;
        &.active {
          background: #F5D290;
          border-color: #F5D290;
          color: #000000;
        }
      }
    }
  }
}
.tab_cont {
  height: 53px;
  background: #161616;

  &:before, &:after {
    background: transparent;
  }
  .style_list {
    font-size: 16px;
    line-height: 22px;
    color: #FFFFFF;
    .style_wrapper {
      .style_item {
        height: auto;
        padding-top: 9px;
        border: 0;
        font-weight: 400;
        min-width: 48px;
        margin-right: 12px;
        &.active {
          padding-top: 0;
          font-size: 24px;
          color: #FFFFFF;
          line-height: 34px;
          font-weight: 600;
          background: transparent;
          position: relative;
          &:after {
            content: '';
            position: absolute;
            width: 24px;
            height: 3px;
            background: #FFFFFF;
            border-radius: 0px 0px 0px 0px;
            bottom: -5px;
            left: 50%;
            transform: translateX(-50%);
          }
        }
      }
    }
  }
}

.cont {
  background: #0C0C0C;
  border-radius: 4px 4px 4px 4px;
  margin-top: 24px;
  padding-left: 16px;
  padding-right: 16px;
  padding-top: 18px;
  padding-bottom: 18px;
  font-size: 14px;
  position: relative;
  .title_txt {
    color: #FFFFFF;
    line-height: 20px;
  }
  .tips {
    font-size: 12px;
    line-height: 16px;
    color: rgba(255,255,255,0.2);
  }
  input {
    text-align: right;
    color: #ADADAD;
    &.active {
      color: #fff;
    }
  }
  .upload_txt {
    color: rgba(255,255,255,0.2);
    &.active {
      color: #fff;
    }
  }
  .tr {
    text-align: right;
  }
  .input_file {
    background: transparent;
  }
  &.next {
    background: #0C0C0C url('../../assets/img/music/next_icon.png') no-repeat center right 16px / 8px 14px;
  }
}
.btns {
  height: 56px;
  background: #F5D290;
  border-radius: 4px 4px 4px 4px;
  text-align: center;
  line-height: 56px;
  font-size: 16px;
  color: #000000;
  margin-top: 24px;
  .icon {
    margin-right: 8px;
    width: 20px;
    height: 20px;
  }
}

input::placeholder, textarea::placeholder {
  color: rgba(255,255,255,0.2);
}

</style>